<template>
    <div>
        <div class="i-layout-page-header">
            <PageHeader title="工资信息" hidden-breadcrumb/>
        </div>
        <!--    公共筛选查询区域-->
        <Card :bordered="false" dis-hover>
            <!--筛选查询条件区域-->
            <Form ref="form" :model="data" :rules="rules" :label-width="labelWidth" :label-position="labelPosition">
                <Row :gutter="24" type="flex" justify="end">

                    <Col v-bind="grid">
                        <FormItem label="用户名称：">
                            <Input v-model="data.nickName" placeholder="请输入关键字"/>
                        </FormItem>
                    </Col>
                    <Col v-bind="grid">
                        <FormItem label="所属部门：" >
                            <Select v-model="data.dept" placeholder="请选择部门">
                                <Option value="1">研发部</Option>
                                <Option value="2">市场部门</Option>
                                <Option value="3">测试部门</Option>
                                <Option value="4">财务部门</Option>
                                <Option value="5">运维部门</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <template v-if="collapse">
                        <Col v-bind="grid">
                            <FormItem label="开始时间：">
                                <Date-picker v-model="data.startTime"
                                             format="yyyy-MM-dd HH:mm:ss"
                                             type="datetime" placeholder="开始日期" v-width="'100%'"></Date-picker>
                            </FormItem>
                        </Col>
                        <Col v-bind="grid">
                            <FormItem label="结束时间：">
                                <Date-picker
                                        v-model="data.endTime"
                                        format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="结束日期"
                                        v-width="'100%'"></Date-picker>
                            </FormItem>
                        </Col>
                        <Col v-bind="grid">
                        </Col>
                    </template>
                    <Col v-bind="grid" class="ivu-text-right">
                        <FormItem>
                            <Button type="primary" @click="getData">查询</Button>
                            <Button class="ivu-ml-8" @click="handleReset">重置</Button>
                            <a v-font="14" class="ivu-ml-8" @click="collapse = !collapse">
                                <template v-if="!collapse">
                                    展开 <Icon type="ios-arrow-down" />
                                </template>
                                <template v-else>
                                    收起 <Icon type="ios-arrow-up" />
                                </template>
                            </a>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
            <!--新增-->
            <div class="buttonContain">
                <Button @click="handleOpenCreate" type="primary">工资录入</Button>
            </div>
        </Card>
        <!--数据渲染区域-->
        <div class="i-table-no-border">
            <!--        <Button type="primary" icon="md-add" @click="handleOpenCreate">新增</Button>-->
            <Table
                    ref="table"
                    :columns="columnslist"
                    :data="dataWithPage"
                    :loading="loading"
            >
                <template slot-scope="{ row }" slot="status">
                    <Badge v-if="row.status === 0" status="error" text="禁用"/>
                    <Badge v-if="row.status === 1" status="success" text="启用"/>
                </template>
                <template slot-scope="{ row }" slot="tipType">
                    <span v-if="row.txlx === '1'">轻微隐患</span>
                    <span v-if="row.txlx === '2'">一般隐患</span>
                    <span v-if="row.txlx === '3'">严重隐患</span>
                    <span v-if="row.txlx === '4'">火灾报警</span>
                    <span v-if="row.txlx === '5'">灰名单</span>
                    <span v-if="row.txlx === '6'">黑名单</span>
                </template>
                <template slot-scope="{ row }" slot="action">
                    <a @click="showDetail(row.sId)">详情</a>
                    <Divider type="vertical"/>
                    <a @click="handleEdit(row.sId)" :style="{'color':'#4AABF2'}">更新</a>
                    <Divider type="vertical"/>
                    <a @click="handleDelete(row.sId)" :style="{'color':'red'}">删除</a>
                </template>
            </Table>
            <div class="ivu-mt ivu-text-center">
                <Page :total="limitData.length" show-elevator :current.sync="current" show-total/>
            </div>

        </div>
    </div>

</template>

<script>
    import {mapState} from 'vuex';
    import empSalary from "@/api/finance-empSalary";

    export default {
        data() {
            return {
                collapse: false,
                grid: {
                    xl: 8,
                    lg: 8,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                data: {
                    name: '',
                    status1: '',
                    count: null,
                    date: '',
                    status2: '',
                    status3: ''
                },
                //验证规则
                rules: {},
                dayak: [],
                count: 10,
                current: 1,
                list: [],
                size: 10,
                datalist: [],
                columnslist: [
                    {
                        title: '序号',
                        key: 'sId',
                        minWidth: 80

                    },
                    {
                        title: '员工姓名',
                        key: 'nickName',
                        minWidth: 80
                    },  {
                        title: '所属部门',
                        key: 'deptName',
                        minWidth: 80
                    }, {
                        title: '账号',
                        key: 'account',
                        minWidth: 80
                    },
                    {
                        title: '基本薪资',
                        key: 'basicSalary',
                        minWidth: 80
                    },
                    {
                        title: '奖金',
                        key: 'bonus',
                        minWidth: 80
                    },  {
                        title: '午餐补贴',
                        key: 'lunchSalary',
                        minWidth: 80
                    }, {
                        title: '请假扣除',
                        key: 'leaveDel',
                        minWidth: 80
                    }, {
                        title: '加班费',
                        key: 'overworkAdd',
                        minWidth: 80
                    }, {
                        title: '考勤扣除',
                        key: 'attendanceDel',
                        minWidth: 80
                    }, {
                        title: '应发工资',
                        key: 'allSalary',
                        minWidth: 80
                    },
                    {
                        title: '实发工资',
                        key: 'shouldSalary',
                        minWidth: 80
                    },
                    {
                        title: '启用时间',
                        key: 'createDate',
                        minWidth: 120
                    },{
                        title: '养老金基数',
                        key: 'pensionBase',
                        minWidth: 80
                    }, {
                        title: '养老金比率',
                        key: 'pensionPer',
                        minWidth: 80
                    },

                    {
                        title: '医疗基数',
                        key: 'medicalBase',
                        minWidth: 80
                    },
                    {
                        title: '医疗保险比率',
                        key: 'medicalPer',
                        minWidth: 80
                    },{
                        title: '失业保险基数',
                        key: 'unempBase',
                        minWidth: 80
                    },{
                        title: '失业保险比率',
                        key: 'unempPer',
                        minWidth: 80
                    },{
                        title: '工伤保险基数',
                        key: 'injuryBase',
                        minWidth: 80
                    },{
                        title: '工伤保险比率',
                        key: 'injuryPer',
                        minWidth: 80
                    },{
                        title: '生育保险基数',
                        key: 'bithinsuranceBase',
                        minWidth: 80
                    },{
                        title: '生育保险比率',
                        key: 'bithinsurancePer',
                        minWidth: 80
                    },{
                        title: '公积金基数',
                        key: 'accumulationFundBase',
                        minWidth: 80
                    },{
                        title: '公积金比率',
                        key: 'accumulationFundPer',
                        minWidth: 80
                    },

                    {
                        title: '操作',
                        slot: 'action',
                        align: 'center',
                        minWidth: 180
                    }
                ],
                loading: false,
            }
        },
        computed: {
            limitData() {
                let data = [...this.list];
                return data;
            },
            ...mapState('admin/layout', [
                'isMobile'
            ]),
            labelWidth() {
                return this.isMobile ? undefined : 100;
            },
            labelPosition() {
                return this.isMobile ? 'top' : 'right';
            },
            // 因为要动态计算总页数，所以还需要一个计算属性来返回最终给 Table 的 data
            dataWithPage() {
                const data = this.limitData;
                const start = this.current * this.size - this.size;
                const end = start + this.size;
                return [...data].slice(start, end);
            },
        },
        created() {
            this.getData();
        },
        methods: {
            //调用数据
            getData() {

                this.current = 1;
                this.loading = true;
                //调接口
                empSalary.findByPage({

                })
                        .then(res => {
                            // 返回数据
                            this.list = res;
                            this.loading = false;
                        })
                        .catch(err => {
                            // 异常情况
                        })
            },
            handleSubmit() {
                this.$emit('on-submit', this.data);
            },
            handleReset() {
                this.$refs.form.resetFields();
                this.$emit('on-reset');
            },
            /*新增*/
            handleOpenCreate() {
                this.$router.push('/finance/empSalary/empSalary-add')
            },
            // 新增数据
            handleCreate() {
                this.$refs.create.validate((valid) => {
                    if (valid) {
                        if (this.updateIndex < 0) {
                            // 新建
                            const mockData = this.mockOneData();
                            mockData.desc = this.createData.desc;
                            mockData.date = new Date();
                            this.list.splice(0, 0, mockData);
                            this.$Message.success('创建成功');
                        } else {
                            // 修改
                            const updateItemName = this.dataWithPage[this.updateIndex].name;
                            const updateItemIndex = this.list.findIndex(item => item.name === updateItemName);
                            this.list[updateItemIndex].desc = this.createData.desc;
                            this.$Message.success('修改成功');
                        }

                        this.showCreate = false;
                        this.creating = false;
                        this.$nextTick(() => {
                            this.creating = true;
                        });
                    } else {
                        this.creating = false;
                        this.$nextTick(() => {
                            this.creating = true;
                        });
                    }
                });
            },
            // 详情
            showDetail(sId) {
                this.$router.push({
                    path: '/finance/empSalary/empSalary-detail',
                    name: 'empSalary-detail',
                    query: {
                        sId
                    }
                });
            },
            //编辑
            handleEdit(sId) {
                this.$router.push({
                    path: '/finance/empSalary/empSalary-add',
                    name: 'empSalary-add',
                    query: {
                        sId,
                        myIndex:true
                    }
                });

            },
            //删除
            handleDelete(sId) {
                this.$Modal.confirm({
                    title: '删除',
                    content: '确定删除吗？',
                    onOk: () => {
                        //调接口
                        empSalary.deleteById({
                            sId
                        })
                            .then(res => {
                                // 返回数据
                                this.$Message.success('删除成功');
                                this.getData();
                            })
                            .catch(err => {
                                // 异常情况
                            })

                    }
                });
            }
        },
    }
</script>


<style lang="less" scoped>
    .buttonContain {
        > button {
            width: 120px;
            height: 40px;
            font-size: 16px;
        }
    }

</style>
